<template>
    <tab-bar class="Nav">
        <div class="Nav_top">
            <router-link to="/writing/titleGeneration/titleGeneration" active-class="active" :class="{'active': $route.meta.requiresAuth}"  class="Nav_top_list">
                <div class="top_list_icon">
                    <span><img src="@a/img/sv30.svg"/><img src="@a/img/sv30on.svg"/></span>
                </div>
                <div class="top_list_title">SEO软文</div>
            </router-link>
            <router-link to="/copyWriting" active-class="active" class="Nav_top_list">
                <div class="top_list_icon">
                    <span><img src="@a/img/sv31.svg"/><img src="@a/img/sv31on.svg"/></span>
                </div>
                <div class="top_list_title">文案创作</div>
            </router-link>
            <router-link to="/chatDog" active-class="active" class="Nav_top_list">
                <div class="top_list_icon">
                    <span><img src="@a/img/sv62.svg"/><img src="@a/img/sv62on.svg"/></span>
                </div>
                <div class="top_list_title">ChatDOG</div>
            </router-link>
            <router-link to="/alRobot" active-class="active" class="Nav_top_list">
                <div class="top_list_icon">
                    <span><img src="@a/img/sv66.svg"/><img src="@a/img/sv66on.svg"/></span>
                </div>
                <div class="top_list_title">AI机器人</div>
            </router-link>
        </div>
        <div class="Nav_bottom">
            <router-link to="/integral/rechargeChatDetails" active-class="active" :class="{'active': $route.meta.integral}" class="Nav_bottom_list">
                <div class="bottom_list_icon"><i class="el-icon-coin"></i></div>
                <div class="bottom_list_title">费用</div>
            </router-link>
            <router-link to="/memberCentre/basicInformation" active-class="active" :class="{'active': $route.meta.memberCentre}" class="Nav_bottom_list">
                <div class="bottom_list_icon"><i class="el-icon-user"></i></div>
                <div class="bottom_list_title">会员</div>
            </router-link>
        </div>
    </tab-bar>
</template>

<script>
    export default {
        name: "mainTabBar",
		data() {
			return{
				chatDogShow:false,
			}
		},
        components: {

        },
		created() {
			//当前时间戳
			var timeStamp = new Date().getTime();
			timeStamp=Math.floor(timeStamp / 1000);
			//会员到期时间
			var member_expired=this.$store.getters.memberInfo.chat_end_time;
			member_expired=Math.floor(member_expired);
			if(member_expired>timeStamp){
				this.chatDogShow=true;
			}else{
				this.chatDogShow=false;
			}
		}
    }
</script>

<style scoped>
    .Nav{ width: 94px; background: #fafbff !important; height: 100%; padding-top: 102px; display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 157px); align-items: center; padding-bottom: 55px;}
    .Nav .Nav_top{ display: flex; flex-direction: column;}
    .Nav .Nav_top .Nav_top_list{ margin-bottom: 45px; text-align: center; height: auto; color: #292f36d9; cursor: pointer; display: inline-block;}
    .Nav .Nav_top .Nav_top_list:last-child{ margin-bottom: 0;}
    .Nav .Nav_top .Nav_top_list .top_list_title{ font-size: 13px; padding-top: 8px;}
    .Nav .Nav_top .Nav_top_list .top_list_icon{ display: flex; align-items: center; justify-content: center;}
    .Nav .Nav_top .Nav_top_list .top_list_icon i::before{ font-size: 30px;}
    .Nav .Nav_top .Nav_top_list .top_list_icon span{ display: flex; align-items: center; justify-content: center; position: relative;}
    .Nav .Nav_top .Nav_top_list .top_list_icon span img{ height: 25px;}
    .Nav .Nav_top .Nav_top_list .top_list_icon span img:last-child{ position: absolute; left: 0; top: 0; opacity: 0;}
    .Nav .Nav_top .Nav_top_list.active .top_list_icon span img{ opacity: 0;}
    .Nav .Nav_top .Nav_top_list.active .top_list_icon span img:last-child{ opacity: 1;}
    .Nav .Nav_top .Nav_top_list:hover .top_list_icon span img{ opacity: 0;}
    .Nav .Nav_top .Nav_top_list:hover .top_list_icon span img:last-child{ opacity: 1;}
    .Nav .Nav_top .Nav_top_list.active .top_list_title{ color: #3662eb;}
    .Nav .Nav_top .Nav_top_list.active .top_list_icon i::before{ color: #3662eb;}
    .Nav .Nav_top .Nav_top_list:hover .top_list_title{ color: #3662eb;}
    .Nav .Nav_top .Nav_top_list:hover .top_list_icon i::before{ color: #3662eb;}
    .Nav .Nav_bottom { display: flex; flex-direction: column;}
    .Nav .Nav_bottom .Nav_bottom_list{ margin-top: 20px; text-align: center; display: inline-block;}
    .Nav .Nav_bottom .Nav_bottom_list .top_list_icon span{ display: flex; align-items: center; justify-content: center; position: relative;}
    .Nav .Nav_bottom .Nav_bottom_list .top_list_icon span img{ height: 25px;}
    .Nav .Nav_bottom .Nav_bottom_list .top_list_icon span img:last-child{ position: absolute; left: 0; top: 0; opacity: 0;}
    .Nav .Nav_bottom .Nav_bottom_list.active .top_list_icon span img{ opacity: 0;}
    .Nav .Nav_bottom .Nav_bottom_list.active .top_list_icon span img:last-child{ opacity: 1;}
    .Nav .Nav_bottom .Nav_bottom_list:hover .top_list_icon span img{ opacity: 0;}
    .Nav .Nav_bottom .Nav_bottom_list:hover .top_list_icon span img:last-child{ opacity: 1;}
    .Nav .Nav_bottom .Nav_bottom_list:first-child{ margin-top: 0;}
    .Nav .Nav_bottom .Nav_bottom_list .bottom_list_icon i::before{ font-size: 22px; color: #474b5a;}
    .Nav .Nav_bottom .Nav_bottom_list .bottom_list_title{ font-size: 13px; color: #474b5a; margin-top: 5px;}
    .Nav .Nav_bottom .Nav_bottom_list.active .bottom_list_title{ color: #3662eb;}
    .Nav .Nav_bottom .Nav_bottom_list.active .bottom_list_icon i::before{ color: #3662eb;}
</style>
